<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" href="./img/brand.png">
    <link rel="stylesheet" href="./mvp.css">

    <meta charset="utf-8">
    <meta name="description" content="MVP.css - No classes, no framework. Just semantic HTML and you're done.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>MVP.css - Minimalist stylesheet for HTML elements</title>
</head>

<body>
    <header>
        <nav>
            <a href="https://andybrewer.github.io/mvp/"><img alt="MVP.css" src="./img/logo.png" height="70"></a>
            <ul>
                <li>Home</li>
                <li><a href="#docs">Docs</a></li>
                <li><a href="#faq">FAQ</a></li>
                <li><a href="https://www.github.com/andybrewer/mvp/" target="_blank">GitHub &nearr;</a></li>
            </ul>
        </nav>
        <h1>A <u>minimalist</u> stylesheet for HTML elements</h1>
        <p><b>No class names, no frameworks,</b> just <em>semantic</em> HTML and <mark>you're done</mark>.</p>
        <br>
        <p><a download="mvp.html" href="./mvp.html" target="_blank"><i>Download HTML &nearr;</i></a><a
                download="mvp.css" href="./mvp.css" target="_blank"><b>Download MVP.css (8kb) &nearr;</b></a></p>
        <br><br>
        <p><sup>PRO TIP</sup> Add this code to a new HTML
            file:<br><br><code>&lt;link rel="stylesheet" href="https://unpkg.com/mvp.css"&gt;</code></p>
    </header>
    <main>
        <hr>
        <section>
            <header>
                <h2>Simple, reusable components</h2>
                <p>For a clean looking design that doesn't get in the way</p>
            </header>
            <aside>
                <img alt="HTML only" src="./img/html.svg" height="150">
                <h3>HTML and You're Done</h3>
                <p>MVP styles your root HTML elements, so you don't need to learn a new CSS framework or naming
                    conventions.</p>
                <p><a href="https://www.w3schools.com/TAGS/ref_byfunc.asp" target="_blank"><em>HTML Guide
                            &nearr;</em></a></p>
            </aside>
            <aside>
                <img alt="Mobile friendly" src="./img/mobile.svg" height="150">
                <h3>Mobile-friendly UI</h3>
                <p>MVP is designed to look great on all browsers and devices out of the box for rapid prototyping.
                </p>
                <p>It's like an amped up CSS reset that you can toss into any project to get decent styling.</p>
            </aside>
            <aside>
                <img alt="MIT license" src="./img/license.svg" height="150">
                <h3>MIT License</h3>
                <p>MVP is released under the permissive MIT license so you can freely use it however you'd like.</p>
                <p>That means personal projects, commercial ventures, remixes and more are all welcome.</p>
            </aside>
        </section>
        <hr>
        <section id="testimonials">
            <blockquote>
                <img alt="Quote" src="./img/icon-quote.svg" height="80"><br>
                "By far the easiest stylesheet I've ever used. It integrates easily into <s>one</s> all of my
                startup&nbsp;projects."
                <footer><img alt="MVP.css" src="./img/brand.png" height="36"><br><br><i>- Andy Brewer, Author of
                        MVP.css</i></footer>
            </blockquote>
        </section>
        <hr>
        <section id="features">
            <header>
                <h2>Flexibility without complexity</h2>
                <p>A few, clean styling options without all the bells and whistles</p>
            </header>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>MVP.css</th>
                        <th>No CSS</th>
                        <th>Custom CSS</th>
                    </tr>
                </thead>
                <tr>
                    <td>Mobile friendly</td>
                    <td><b>&#10003;</b></td>
                    <td>&#10003;</td>
                    <td>&#10003;</td>
                </tr>
                <tr>
                    <td>Works out of the box</td>
                    <td><b>&#10003;</b></td>
                    <td>&#10003;</td>
                    <td>&empty;</td>
                </tr>
                <tr>
                    <td>Easy to customize</td>
                    <td><b>&#10003;</b></td>
                    <td>&#10003;</td>
                    <td>&empty;</td>
                </tr>
                <tr>
                    <td>Only semantic HTML</td>
                    <td><b>&#10003;</b></td>
                    <td>&#10003;</td>
                    <td>&empty;</td>
                </tr>
                <tr>
                    <td>No class names</td>
                    <td><b>&#10003;</b></td>
                    <td>&#10003;</td>
                    <td>&empty;</td>
                </tr>
                <tr>
                    <td>Perfect for an MVP</td>
                    <td><b>&#10003;</b></td>
                    <td>&empty;</td>
                    <td>&empty;</td>
                </tr>
            </table>
        </section>
        <hr>
        <div id="figure">
            <header>
                <h2>A decent MVP in no time</h2>
                <p>More building and less designing with "set and forget" styling.</p>
            </header>
            <figure>
                <img alt="Stock photo" src="./img/stock.jpg">
                <figcaption><i>"Uber for X" brainstorming session</i></figcaption>
            </figure>
        </div>
        <hr>
        <article id="docs">
            <h2>Docs</h2>
            <h3 id="html">HTML Reference</h3>
            <aside>
                <p>For a showcase of each styled element, check out the <a href="./mvp.html" target="_blank">quickstart
                        template &nearr;</a>.</p>
            </aside><br>
            <p>MVP.css works with the following HTML elements:</p>
            <ul>
                <li><code>&lt;a&gt;</code> <small>&mdash; text links</small>
                    <ul>
                        <li><code>&lt;a&gt;&lt;b&gt;</code>, <code>&lt;a&gt;&lt;strong&gt;</code> <small>&mdash; solid
                                link buttons</small>
                        </li>
                        <li><code>&lt;a&gt;&lt;em&gt;</code>, <code>&lt;a&gt;&lt;i&gt;</code> <small>&mdash; outlined
                                link buttons</small>
                        </li>
                    </ul>
                </li>
                <li><code>&lt;article&gt;</code> <small>&mdash; content area with normal styling</small>
                    <ul>
                        <li><code>&lt;article&gt;&lt;aside&gt;</code> <small>&mdash; text callout</small>
                        </li>
                    </ul>
                </li>
                <li><code>&lt;blockquote&gt;</code> <small>&mdash; quote callout</small>
                    <ul>
                        <li><code>&lt;blockquote&gt;&lt;footer&gt;</code> <small>&mdash; quote attribution</small>
                        </li>
                    </ul>
                </li>
                <li><code>&lt;body&gt;</code> <small>&mdash; default parent element</small></li>
                <li><code>&lt;button&gt;</code> <small>&mdash; form buttons</small></li>
                <li><code>&lt;code&gt;</code> <small>&mdash; inline code highlighting</small></li>
                <li><code>&lt;details&gt;</code> <small>&mdash; default expandable content section</small>
                    <ul>
                        <li><code>&lt;details&gt;&lt;summary&gt;</code> <small>&mdash; expandable heading</small></li>
                    </ul>
                </li>
                <li><code>&lt;div&gt;</code> <small>&mdash; unstyled element</small></li>
                <li><code>&lt;figure&gt;</code> <small>&mdash; image callouts</small>
                    <ul>
                        <li><code>&lt;figure&gt;&lt;figcaption&gt;</code> <small>&mdash; image callout captions</small>
                        </li>
                    </ul>
                </li>
                <li><code>&lt;footer&gt;</code> <small>&mdash; footer area</small></li>
                <li><code>&lt;form&gt;</code> <small>&mdash; small form area</small>
                    <ul>
                        <li><code>&lt;form&gt;&lt;input&gt;</code> <small>&mdash; short input field</small></li>
                        <li><code>&lt;form&gt;&lt;label&gt;</code> <small>&mdash; form field labels</small></li>
                        <li><code>&lt;form&gt;&lt;select&gt;</code> <small>&mdash; dropdown options container</small>
                            <ul>
                                <li><code>&lt;form&gt;&lt;select&gt;&lt;option&gt;</code> <small>&mdash; dropdown option
                                        items</small></li>
                            </ul>
                        </li>
                        <li><code>&lt;form&gt;&lt;textarea&gt;</code> <small>&mdash; large input field</small></li>
                    </ul>
                </li>
                <li><code>&lt;header&gt;</code> <small>&mdash; content area with centered styling</small></li>
                <li><code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;h4&gt;</code>,
                    <code>&lt;h5&gt;</code>, <code>&lt;h6&gt;</code> <small>&mdash; headings</small></li>
                <li><code>&lt;hr&gt;</code> <small>&mdash; horizontal rule (divider)</small></li>
                <li><code>&lt;main&gt;</code> <small>&mdash; main content area</small></li>
                <li><code>&lt;mark&gt;</code> <small>&mdash; text highlighting</small></li>
                <li><code>&lt;nav&gt;</code> <small>&mdash; top navigation</small>
                    <ul>
                        <li><code>&lt;nav&gt;&lt;ul&gt;</code> <small>&mdash; nav links container</small></li>
                        <li><code>&lt;nav&gt;&lt;ul&gt;&lt;li&gt;</code> <small>&mdash; nav link items</small></li>
                        <li><code>&lt;nav&gt;&lt;ul&gt;&lt;li&gt;&lt;ul&gt;</code> <small>&mdash; nav dropdown
                                container</small></li>
                        <li><code>&lt;nav&gt;&lt;ul&gt;&lt;li&gt;&lt;ul&gt;&lt;li&gt;</code> <small>&mdash; nav dropdown
                                link items</small></li>
                    </ul>
                </li>
                <li><code>&lt;ol&gt;</code> <small>&mdash; numbered list container</small>
                    <ul>
                        <li><code>&lt;ol&gt;&lt;li&gt;</code> <small>&mdash; numbered list items</small></li>
                    </ul>
                </li>
                <li><code>&lt;p&gt;</code> <small>&mdash; paragraph tag</small></li>
                <li><code>&lt;pre&gt;</code> <small>&mdash; preformatted text</small>
                    <ul>
                        <li><code>&lt;pre&gt;&lt;code&gt;</code> <small>&mdash; code block</small></li>
                        <li><code>&lt;pre&gt;&lt;samp&gt;</code> <small>&mdash; computer output block</small></li>
                    </ul>
                </li>
                <li><code>&lt;samp&gt;</code> <small>&mdash; inline computer output</small></li>
                <li><code>&lt;section&gt;</code> <small>&mdash; content area for centered / special content</small>
                    <ul>
                        <li><code>&lt;section&gt;&lt;aside&gt;</code> <small>&mdash; content card</small></li>
                    </ul>
                </li>
                <li><code>&lt;small&gt;</code> <small>&mdash; smaller text</small></li>
                <li><code>&lt;sup&gt;</code> <small>&mdash; raised text (notification bubbles)</small></li>
                <li><code>&lt;table&gt;</code> <small>&mdash; data table</small>
                    <ul>
                        <li><code>&lt;table&gt;&lt;td&gt;</code> <small>&mdash; data table cell</small></li>
                        <li><code>&lt;table&gt;&lt;th&gt;</code> <small>&mdash; data table header cell</small></li>
                        <li><code>&lt;table&gt;&lt;thead&gt;</code> <small>&mdash; data table header section</small>
                        </li>
                        <li><code>&lt;table&gt;&lt;tr&gt;</code> <small>&mdash; data table row</small></li>
                    </ul>
                </li>
                <li><code>&lt;ul&gt;</code> <small>&mdash; unordered list container</small>
                    <ul>
                        <li><code>&lt;ul&gt;&lt;li&gt;</code> <small>&mdash; unordered list item</small></li>
                    </ul>
                </li>
            </ul>
            <br>
            <h3 id="variables">Modifying the CSS variables</h3>
            <p>MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.</p>
            <pre>
                <code>
:root {
    --border-radius: 5px;
    --box-shadow: 2px 2px 10px;
    --color: #118bee;
    --color-accent: #118bee0b;
    --color-bg: #fff;
    --color-bg-secondary: #e9e9e9;
    --color-secondary: #920de9;
    --color-secondary-accent: #920de90b;
    --color-shadow: #f4f4f4;
    --color-text: #000;
    --color-text-secondary: #999;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --hover-brightness: 1.2;
    --justify-important: center;
    --justify-normal: left;
    --line-height: 150%;
    --width-card: 285px;
    --width-card-medium: 460px;
    --width-card-wide: 800px;
    --width-content: 1080px;
}
                </code>
            </pre>

            <p>Custom styles can be added below the <code>/* Custom styles */</code> comment at the end of the file.</p>
        </article>
        <hr>
        <article id="faq">
            <h2>Frequently Asked Questions</h2>
            <details>
                <summary>Why would I use this?</summary>
                <p>If you just want to launch already.</p>
                <p><sup>PRO TIP</sup> An MVP is a temporary site, it doesn't have to be <i>and shouldn't be</i> perfect.
                </p>
            </details>
            <details>
                <summary>What skills will I need?</summary>
                <p>Mostly HTML, maybe a hint of CSS if you want to get fancy.</p>
                <p><i>CSS</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <progress max="100" value="5">5</progress></p>
                <p><i>Design</i>&nbsp;&nbsp; <progress max="100" value="0">0</progress></p>
                <p><i>HTML</i>&nbsp;&nbsp;&nbsp;&nbsp; <progress max="100" value="100">100</progress></p>
            </details>
            <details>
                <summary>Is there a minified version?</summary>
                <p>No, you don't need one for an MVP.</p>
            </details>
            <details>
                <summary>How can I improve my design?</summary>
                <p>Here are some helpful resources:</p>
                <ul>
                    <li>Emojis - <a href="https://www.emojicopy.com/" target="_blank">Emojicopy
                            &nearr;</a></li>
                    <li>Icons - <a href="https://www.toptal.com/designers/htmlarrows/" target="_blank">HTML Entities
                            List by TopTal
                            &nearr;</a></li>
                    <li>Icons - <a href="https://thenounproject.com/" target="_blank">TheNounProject
                            &nearr;</a></li>
                    <li>Illustrations - <a href="https://gallery.manypixels.co/" target="_blank">Manypixels
                            &nearr;</a></li>
                    <li>Illustrations - <a href="https://undraw.co/illustrations" target="_blank">Undraw &nearr;</a>
                    </li>
                    <li>Logo - <a href="https://www.namecheap.com/logo-maker/app/" target="_blank">Namecheap Logo
                            Maker &nearr;</a></li>
                    <li>Product Shots - <a href="https://www.screely.com/" target="_blank">Screely &nearr;</a></li>
                    <li>Stock Photos - <a href="https://www.pexels.com/" target="_blank">Pexels &nearr;</a></li>
                    <li>Stock Photos - <a href="https://unsplash.com/" target="_blank">Unsplash &nearr;</a></li>
                </ul>
            </details>
            <details>
                <summary>What if I don't like the default styles?</summary>
                <p>Most styles are editable through <em>CSS variables</em>. You can also add your own styles
                    inline, at the end of MVP.css or in a new stylesheet.</p>
                <p><sup>PRO TIP</sup> If there are two conflicting CSS styles, the last one will take precedence.</p>
                <pre>
                    <code>
:root {
    --color: #118bee;
}

/* Lower in the CSS, or in a 2nd stylesheet */

:root {
    --color: green; /* This will take precedence */
}
                    </code>
                </pre>
            </details>
            <details>
                <summary>What if I still don't like it?</summary>
                <p>That's OK, you probably shouldn't love your MVP. The goal of MVP.css is to help you
                    feel <i>slightly</i> less embarrased about it.</p>
                <p><span style="font-size: xx-large; position: relative; top: 6px; margin-right: 7px;">👉</span> If you
                    want a CSS framework with more features check out <a href="https://bulma.io/" target="_blank">Bulma
                        &nearr;</a> or <a href="https://tailwindcss.com/" target="_blank">Tailwind &nearr;</a>.</p>
            </details>
        </article>
        <hr>
        <section id="ideas">
            <header>
                <img alt="Idea" src="./img/idea.svg" height="200">
                <h2>What can you build with MVP.css?</h2>
                <p>Free ideas below &darr;</p>
            </header>
            <form>
                <header>
                    <img alt="MVP.css" src="./img/brand.png" height="80">
                </header>
                <label for="company">A company you like:</label>
                <input type="text" id="company" name="company" size="28" placeholder="Company name">
                <label for="hobby">A hobby you like:</label>
                <textarea cols="28" rows="2" id="hobby"></textarea>
                <label for="model">Business Model:</label>
                <select id="model">
                    <option value="bootstrapped">bootstrapped</option>
                    <option value="VC-backed">funded</option>
                </select>
                <label>Team Size:</label>
                <input type="radio" id="founders-solo" name="founders" value="a solo founder" checked> <label
                    for="founders-solo">Solo</label>
                <input type="radio" id="founders-co" name="founders" value="two co-founders"> <label
                    for="founders-co">Co-founders</label>
                <label>Focus:</label>
                <input type="checkbox" id="focus-price" name="focus[]" value="price" checked> <label
                    for="focus-price">Price</label>
                <input type="checkbox" id="focus-service" name="focus[]" value="service"> <label
                    for="focus-service">Service</label>
                <input type="checkbox" id="focus-features" name="focus[]" value="features"> <label
                    for="focus-features">Features</label>
                <br>
                <button type="submit" onclick="newIdea(); return false;">Submit</button>
                <div id="results" style="max-width: 100%;">

                </div>
            </form>
        </section>
    </main>
    <footer>
        <hr>
        <p>
            Made by <a href="https://www.andybrewer.com" target="_blank">Andy Brewer
                &nearr;</a><br>
        </p>
    </footer>

    <script>
        function newIdea() {
            let company = document.getElementById("company").value || "GitHub";
            let focusAreas = [];
            document.querySelectorAll("input[name='focus[]']:checked").forEach(el => { focusAreas.push(el.value) });
            let focus = focusAreas.join(" / ") || "stealthy growth";
            let founders = document.querySelector("input[name='founders']:checked").value;
            let hobby = document.getElementById("hobby").value || "design";
            let model = document.getElementById("model").value;

            document.getElementById("results").innerHTML = `<br><h3>Amazing Idea &mdash;</h3><p>A ${model} <mark><b>${company} for ${hobby}</b></mark><br>with ${founders} and a focus on<br>${focus}.</p>`;
        }
    </script>
</body>

</html>